<template>
  <div class="main">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      class="form"
    >
      <a-form-item ref="name" label="姓名" name="name">
        <a-input v-model:value="formState.name" />
      </a-form-item>
      <a-form-item ref="sex" label="性别" name="sex">
        <a-radio-group v-model:value="formState.sex">
          <a-radio value="男">男</a-radio>
          <a-radio value="女">女</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item ref="age" label="年龄" name="age">
        <a-select v-model:value="formState.age">
          <a-select-option value="18">18</a-select-option>
          <a-select-option value="19">19</a-select-option>
          <a-select-option value="20">20</a-select-option>
          <a-select-option value="21">21</a-select-option>
          <a-select-option value="22">22</a-select-option>
          <a-select-option value="23">23</a-select-option>
          <a-select-option value="24">24</a-select-option>
          <a-select-option value="25">25</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item ref="phone" label="手机号或微信号" name="phone">
        <a-input v-model:value="formState.phone" />
      </a-form-item>
      <a-form-item ref="phone" label="支付宝账号" name="phone">
        <a-input v-model:value="formState.pay" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 10 }">
        <a-button type="primary" @click="onSubmit">开始实验</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { reactive, ref, toRaw } from "vue";
import { addUser } from "@/utils/api";
import { setToken } from "@/utils/auth";
import { useRouter } from "vue-router";
export default {
  setup() {
    const formRef = ref();
    const router = useRouter();
    const formState = reactive({
      name: "",
      age: "",
      sex: "",
      phone: "",
      pay: "",
    });
    const rules = {
      name: [
        {
          required: true,
          message: "请输入姓名",
          trigger: "blur",
        },
      ],
      age: [
        {
          required: true,
          message: "请输入年龄",
          trigger: "blur",
        },
      ],
      phone: [
        {
          required: true,
          message: "请输入手机号码",
          trigger: "blur",
        },
      ],
      pay: [
        {
          required: true,
          message: "请输入支付宝账号",
          trigger: "blur",
        },
      ],
      sex: [
        {
          required: true,
          message: "请选择性别",
          trigger: "blur",
        },
      ],
    };

    const onSubmit = () => {
      formRef.value
        .validate()
        .then(() => {
          let arr = ["A", "B", "C"];
          let min = 0;
          let max = 2;
          let a = Math.floor(Math.random() * (max - min + 1)) + min;
          formState.group = arr[a];
          // localStorage.setItem("group", formState.group)
          addUser(formState).then((res) => {
            if (res.data) {
              setToken(res.data.token);
              if (formState.group == "A") {
                router.push("/A");
              }else if(formState.group == "B"){
                router.push("/B");
              }else if(formState.group == "B"){
                router.push("/C");
              }
            }
          });
        })
        .catch((error) => {
          console.log("error", error);
        });
    };

    return {
      formRef,
      labelCol: {
        span: 7,
      },
      wrapperCol: {
        span: 11,
      },
      other: "",
      formState,
      rules,
      onSubmit,
    };
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;

  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.form {
  width: 60%;
}
</style>
